<template>
  <view class="helphistory-bg">
    <!-- 顶部栏 -->
    <view class="helphistory-header">
      <uni-icons type="left" size="24" @click="goBack" style="color: white;margin-right: 10px"/>
      <view class="helphistory-title">救援历史</view>
    </view>
    <view class="helphistory-item" v-for="(item, index) in historyList" :key="index">
      <view class="helphistory-item-header">
        <view class="helphistory-type">{{ item.type }}</view>
        <view class="helphistory-order">订单号：{{ item.orderNo }}</view>
      </view>
      <view class="helphistory-content">
        <view class="helphistory-row">
          <text class="helphistory-label">位置：</text>
          <text class="helphistory-value">{{ item.location }}</text>
        </view>
        <view class="helphistory-row">
          <text class="helphistory-label">车辆：</text>
          <text class="helphistory-value">{{ item.carInfo }}</text>
        </view>
        <view class="helphistory-row">
          <text class="helphistory-label">时间：</text>
          <text class="helphistory-value">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue';

// 模拟数据
const historyList = ref([
  {
    type: '搭电',
    orderNo: 'DD202404280001',
    location: '北京市朝阳区建国路88号',
    carInfo: '京A12345 大众帕萨特',
    time: '2024-04-28 10:30'
  },
  {
    type: '换胎',
    orderNo: 'HT202404270002',
    location: '北京市海淀区中关村大街1号',
    carInfo: '京B67890 丰田卡罗拉',
    time: '2024-04-27 15:20'
  },
  {
    type: '拖车',
    orderNo: 'TC202404260003',
    location: '北京市西城区西单北大街',
    carInfo: '京C54321 本田雅阁',
    time: '2024-04-26 09:15'
  }
]);

const isRefreshing = ref(false);

// 返回上一页
function goBack() {
  uni.navigateBack();
}

// 下拉刷新
function onRefresh() {
  isRefreshing.value = true;
  // 模拟刷新数据
  setTimeout(() => {
    isRefreshing.value = false;
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    });
  }, 1000);
}
</script>

<style scoped lang="scss">
.helphistory-bg {
  min-height: 100vh;
  background: #f5f6fa;
}

.helphistory-header {
  display: flex;
  align-items: center;
  height: 56px;
  background: #338aff;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 0 16px;
}

.helphistory-title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.helphistory-list {
  height: calc(100vh - 56px);
  padding: 16px;
}

.helphistory-item {
  background: #fff;
  border-radius: 12px;
  margin: 16px 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(51, 138, 255, 0.04);
}

.helphistory-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.helphistory-type {
  font-size: 18px;
  font-weight: bold;
  color: #338aff;
}

.helphistory-order {
  font-size: 14px;
  color: #666;
}

.helphistory-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.helphistory-row {
  display: flex;
  align-items: center;
}

.helphistory-label {
  font-size: 14px;
  color: #666;
  width: 60px;
}

.helphistory-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}
</style>
